<template>
  <div style="width: 100%; height: 400px; margin-top: 20px">
    <div
      id="statePercent"
      style="float: left; width: 49%; height: 100%; background: white; border-radius: 5px"
    ></div>
    <div
      id="isVip"
      style="float: right; width: 49%; height: 100%; background: white; border-radius: 5px"
    ></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import axios from 'axios'
import { ElMessage } from 'element-plus'

onMounted(() => {
  getStateData()
  getUserData()
})

const movieStateData = ref([])
const userData = ref([])

function getStateData() {
  axios
    .get('/api/diagram/getMstateCount')
    .then((res) => {
      movieStateData.value = res.data
      stateProportion()
    })
    .catch(() => {
      ElMessage.warning('获取电影状态统计信息失败！')
    })
}

function getUserData() {
  axios
    .get('/api/diagram/getUserTypeCount')
    .then((res) => {
      userData.value = res.data
      vipProportion()
    })
    .catch(() => {
      ElMessage.warning('获取用户统计信息失败！')
    })
}

function stateProportion() {
  const dataList = []
  dataList.push({ value: movieStateData.value[0].value, name: '正在热映' })
  dataList.push({ value: movieStateData.value[1].value, name: '即将上映' })

  const myChart = echarts.init(document.getElementById('statePercent'))
  myChart.setOption({
    title: {
      text: '正在热映/即将上映',
      left: 'right'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a}<br/>{b}:{c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      textStyle: {
        // 图例中文字的样式
        fontSize: 16
      }
    },
    color: ['#FE8463', '#F3A43B'],
    series: [
      {
        name: '观看量',
        type: 'pie', // 设置图表类型为饼图
        radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
        center: ['65%', '50%'],
        itemStyle: {
          normal: {
            label: {
              normal: {
                formatter: '{b}:{c}' + '\n\r' + '({d}%)',
                show: true,
                position: 'left'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            }
          }
        },
        data: dataList
      }
    ]
  })
}

function vipProportion() {
  const dataList = []
  dataList.push({ value: userData.value[0].value, name: '普通用户' })
  dataList.push({ value: userData.value[1].value, name: 'vip用户' })
  const myChart = echarts.init(document.getElementById('isVip'))
  myChart.setOption({
    title: {
      text: '普通用户/vip用户',
      left: 'right'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a}<br/>{b}:{c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      textStyle: {
        // 图例中文字的样式
        fontSize: 16
      }
    },
    color: ['rgb(55,182,255)', 'rgb(1,231,225)'],
    series: [
      {
        name: '数量',
        type: 'pie', // 设置图表类型为饼图
        radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
        center: ['65%', '50%'],
        itemStyle: {
          normal: {
            label: {
              normal: {
                formatter: '{b}:{c}' + '\n\r' + '({d}%)',
                show: true,
                position: 'left'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            }
          }
        },
        data: dataList
      }
    ]
  })
}
</script>
